<template>
  <div id="skill-manager-main">
    <el-header class="title"><h1>技能管理主页</h1></el-header>
    <div>
      <el-table
        class="table"
        :data="allSkill.filter(data => !keyWord || data.name.toLowerCase().includes(keyWord.toLowerCase()) || data.id.toLowerCase().includes(keyWord.toLowerCase()))"
        style="width: 1121px"
        border stripe>
        <el-table-column prop="id" label="ID" width="360"></el-table-column>
        <el-table-column prop="name" label="技能名称" width="460"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot="header" slot-scope="scope">
            <el-input v-model="keyWord" size="mini" placeholder="输入技能名 / ID搜索"/>
          </template>
          <template slot-scope="scope">
            <el-button @click="editSkill(scope.row.id)" type="success">编辑</el-button>
            <el-button @click="deleteSkill(scope.row.id)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="add-btn" style="transform: translate(47%)">
        <el-button type="success" @click="addSkills()">添加技能</el-button>
      </div>
      <div class="back-btn" style="transform: translate(47%)">
        <el-button type="info" @click="$router.push('/admin/skill/guide')">返回</el-button>
      </div>
      <el-pagination
        style="transform: translate(40%)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  export default {
    name: "skill_manager",
    data() {
      return {
        allSkill: [],
        keyWord: "",
        currentPage: 1,
        pageSize: 7,
        pageAmount: 0,
        total: 0
      }
    },
    mounted: function () {
      this.getSkills(this.currentPage, this.pageSize);
    },
    methods: {
      addSkills: function () {
        this.$router.push("/admin/skill/skillAdd");
      },
      getSkills: function (current, size) {
        var self = this;
        this.$axios({
          method: 'post',
          url: '/skill/skill/pageSkillCondition/' + current + '/' + size,
          data: {
            name: self.keyWord
          }
        }).then(function (response) {
          var jsonString = JSON.stringify(response.data);
          var jsonObj = JSON.parse(jsonString);
          self.allSkill = jsonObj.data.rows;
          self.total = jsonObj.data.total;
          self.pageAmount = Math.floor(jsonObj.data.total / 7) + 1;
        });
      },
      deleteSkill: function (id) {
        this.$confirm('此操作将删除该技能, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'delete',
            url: '/skill/skill/delete/' + id,
            data: {}
          }).then(function () {
            location.reload();
          });
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 跳转到编辑页
      editSkill: function (id) {
        this.$router.push("/admin/skill/skillEdit/" + id);
      },
      // 每页多少条
      handleSizeChange(val) {
        this.pageSize = val;
        this.getSkills(this.currentPage, this.pageSize);
      },
      // 当前页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getSkills(this.currentPage, this.pageSize);
      }
    }
  }
</script>

<style lang="scss" scoped>
  #skill-manager-main {
    position: relative;

    .title {
      text-align: center;
      margin-bottom: 40px;
    }

    .table {
      margin: 20px auto;
      height:500px;
    }

    .add-btn {
      position: absolute;
      top: 50px;
      right: 280px;
    }
    .back-btn {
      position: absolute;
      top: 50px;
      left: 180px;
    }

    .tabBar {
      height: 100px;
      width: 240px;
      margin: 20px auto;

      .pagination {
        display: flex;
        justify-content: space-around;
        list-style: none;
      }
    }
  }

</style>
